<!-- 个人中心页面 -->
<template>
  <view class="mine-container">
    <!-- 用户信息区域 -->
    <view class="user-info-box">
      <view class="user-bg">
        <image class="bg-image" src="/static/images/mine-bg.png" mode="aspectFill"></image>
      </view>
      
      <!-- 未登录状态 -->
      <view class="user-info" v-if="!isLogin" @click="goLogin">
        <view class="avatar-box">
          <u-avatar size="160rpx" icon="account"></u-avatar>
        </view>
        <view class="info-box">
          <view class="nickname">点击登录</view>
          <view class="desc">登录后体验更多功能</view>
        </view>
        <view class="arrow-box">
          <u-icon name="arrow-right" color="#ffffff" size="40"></u-icon>
        </view>
      </view>
      
      <!-- 已登录状态 -->
      <view class="user-info" v-else @click="goUserInfo">
        <view class="avatar-box">
          <u-avatar :src="userInfo.avatar" size="160rpx"></u-avatar>
          <view class="vip-tag" v-if="userInfo.vip > 0">VIP{{ userInfo.vip }}</view>
        </view>
        <view class="info-box">
          <view class="nickname">{{ userInfo.nickname || userInfo.username }}</view>
          <view class="desc">{{ userInfo.bio || '这个人很懒，什么都没留下' }}</view>
        </view>
        <view class="arrow-box">
          <u-icon name="arrow-right" color="#ffffff" size="40"></u-icon>
        </view>
      </view>
      
      <!-- 用户数据统计 -->
      <view class="user-stats" v-if="isLogin">
        <view class="stat-item" @click="goMyArchives">
          <view class="stat-num">{{ userStats.archives || 0 }}</view>
          <view class="stat-name">文章</view>
        </view>
        <view class="stat-item" @click="goMyCollection">
          <view class="stat-num">{{ userStats.collection || 0 }}</view>
          <view class="stat-name">收藏</view>
        </view>
        <view class="stat-item" @click="goMyComment">
          <view class="stat-num">{{ userStats.comment || 0 }}</view>
          <view class="stat-name">评论</view>
        </view>
        <view class="stat-item">
          <view class="stat-num">{{ userInfo.score || 0 }}</view>
          <view class="stat-name">积分</view>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <!-- 内容管理 -->
      <view class="menu-group">
        <view class="menu-title">内容管理</view>
        <view class="menu-list">
          <view class="menu-item" @click="goMyArchives">
            <view class="menu-icon">
              <u-icon name="file-text" size="44" color="#3c9cff"></u-icon>
            </view>
            <view class="menu-name">我的文章</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goMyComment">
            <view class="menu-icon">
              <u-icon name="chat" size="44" color="#5ac725"></u-icon>
            </view>
            <view class="menu-name">我的评论</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goMyCollection">
            <view class="menu-icon">
              <u-icon name="star" size="44" color="#f9ae3d"></u-icon>
            </view>
            <view class="menu-name">我的收藏</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goPublish">
            <view class="menu-icon">
              <u-icon name="edit-pen" size="44" color="#f56c6c"></u-icon>
            </view>
            <view class="menu-name">发布文章</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 个人设置 -->
      <view class="menu-group">
        <view class="menu-title">个人设置</view>
        <view class="menu-list">
          <view class="menu-item" @click="goUserInfo">
            <view class="menu-icon">
              <u-icon name="account" size="44" color="#3c9cff"></u-icon>
            </view>
            <view class="menu-name">个人资料</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goSignin">
            <view class="menu-icon">
              <u-icon name="calendar" size="44" color="#5ac725"></u-icon>
            </view>
            <view class="menu-name">每日签到</view>
            <view class="menu-right">
              <view class="badge" v-if="!isSigned">未签到</view>
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goVip">
            <view class="menu-icon">
              <u-icon name="level" size="44" color="#f9ae3d"></u-icon>
            </view>
            <view class="menu-name">会员中心</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goWallet">
            <view class="menu-icon">
              <u-icon name="rmb-circle" size="44" color="#f56c6c"></u-icon>
            </view>
            <view class="menu-name">我的钱包</view>
            <view class="menu-right">
              <text class="balance">{{ userInfo.balance || 0 }}元</text>
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 系统设置 -->
      <view class="menu-group">
        <view class="menu-title">系统设置</view>
        <view class="menu-list">
          <view class="menu-item" @click="goSetting">
            <view class="menu-icon">
              <u-icon name="setting" size="44" color="#3c9cff"></u-icon>
            </view>
            <view class="menu-name">系统设置</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goAbout">
            <view class="menu-icon">
              <u-icon name="info-circle" size="44" color="#5ac725"></u-icon>
            </view>
            <view class="menu-name">关于我们</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" @click="goFeedback">
            <view class="menu-icon">
              <u-icon name="server-man" size="44" color="#f9ae3d"></u-icon>
            </view>
            <view class="menu-name">意见反馈</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
          <view class="menu-item" v-if="isLogin" @click="handleLogout">
            <view class="menu-icon">
              <u-icon name="logout" size="44" color="#f56c6c"></u-icon>
            </view>
            <view class="menu-name">退出登录</view>
            <view class="menu-right">
              <u-icon name="arrow-right" color="#c0c4cc" size="36"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录确认弹窗 -->
    <u-modal
      v-model="showLogoutModal"
      title="提示"
      content="确定要退出登录吗？"
      :show-cancel-button="true"
      @confirm="confirmLogout"
    ></u-modal>
  </view>
</template>

<script>
import { user } from '@/api/cms'

export default {
  data() {
    return {
      isLogin: false,
      userInfo: {},
      userStats: {
        archives: 0,
        collection: 0,
        comment: 0
      },
      isSigned: false,
      showLogoutModal: false
    }
  },
  onShow() {
    // 每次进入页面都检查登录状态
    this.checkLoginStatus()
    
    // 如果已登录，获取用户信息和签到状态
    if (this.isLogin) {
      this.getUserInfo()
      this.getSignStatus()
    }
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const token = uni.getStorageSync('token')
      const userInfo = uni.getStorageSync('userInfo')
      
      if (token && userInfo) {
        this.isLogin = true
        this.userInfo = userInfo
      } else {
        this.isLogin = false
        this.userInfo = {}
      }
    },
    
    // 获取用户信息
    async getUserInfo() {
      try {
        const { data } = await user.getUserInfo()
        if (data.code === 1) {
          this.userInfo = data.data.userInfo
          
          // 更新本地存储的用户信息
          uni.setStorageSync('userInfo', this.userInfo)
          
          // 模拟获取用户统计数据
          this.userStats = {
            archives: Math.floor(Math.random() * 50),
            collection: Math.floor(Math.random() * 100),
            comment: Math.floor(Math.random() * 200)
          }
        }
      } catch (error) {
        console.error('获取用户信息失败', error)
      }
    },
    
    // 获取签到状态
    async getSignStatus() {
      try {
        const { data } = await user.getUserSigned()
        if (data.code === 1) {
          this.isSigned = data.data.signed
        }
      } catch (error) {
        console.error('获取签到状态失败', error)
      }
    },
    
    // 跳转到登录页
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    
    // 跳转到个人资料页
    goUserInfo() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/user/index'
      })
    },
    
    // 跳转到我的文章页
    goMyArchives() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/archives/index'
      })
    },
    
    // 跳转到我的评论页
    goMyComment() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/comment/index'
      })
    },
    
    // 跳转到我的收藏页
    goMyCollection() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/collection/index'
      })
    },
    
    // 跳转到发布文章页
    goPublish() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_article/article/index'
      })
    },
    
    // 跳转到签到页
    goSignin() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/signin/index'
      })
    },
    
    // 跳转到会员中心页
    goVip() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/vip/index'
      })
    },
    
    // 跳转到钱包页
    goWallet() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/wallet/index'
      })
    },
    
    // 跳转到系统设置页
    goSetting() {
      uni.navigateTo({
        url: '/pages_mine/pages/setting/index'
      })
    },
    
    // 跳转到关于我们页
    goAbout() {
      uni.navigateTo({
        url: '/pages_mine/pages/about/index'
      })
    },
    
    // 跳转到意见反馈页
    goFeedback() {
      if (!this.isLogin) {
        this.goLogin()
        return
      }
      
      uni.navigateTo({
        url: '/pages_mine/pages/feedback/index'
      })
    },
    
    // 退出登录
    handleLogout() {
      this.showLogoutModal = true
    },
    
    // 确认退出登录
    async confirmLogout() {
      try {
        const { data } = await user.logout()
        if (data.code === 1) {
          // 清除本地存储的用户信息和token
          uni.removeStorageSync('userInfo')
          uni.removeStorageSync('token')
          
          // 更新状态
          this.isLogin = false
          this.userInfo = {}
          
          uni.showToast({
            title: '退出登录成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: data.msg || '退出登录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('退出登录失败', error)
        uni.showToast({
          title: '退出登录失败，请稍后再试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.user-info-box {
  position: relative;
  height: 400rpx;
  margin-bottom: 120rpx;
}

.user-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  
  .bg-image {
    width: 100%;
    height: 100%;
  }
}

.user-info {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 60rpx 40rpx;
}

.avatar-box {
  position: relative;
  margin-right: 30rpx;
  
  .vip-tag {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #ff9900;
    color: #ffffff;
    font-size: 20rpx;
    padding: 4rpx 10rpx;
    border-radius: 10rpx;
  }
}

.info-box {
  flex: 1;
  
  .nickname {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
  }
  
  .desc {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.user-stats {
  position: absolute;
  bottom: -80rpx;
  left: 40rpx;
  right: 40rpx;
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .stat-num {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10rpx;
  }
  
  .stat-name {
    font-size: 28rpx;
    color: #999999;
  }
}

.menu-section {
  padding: 0 20rpx;
}

.menu-group {
  margin-bottom: 30rpx;
}

.menu-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  padding: 20rpx;
}

.menu-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.menu-icon {
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-name {
  flex: 1;
  font-size: 30rpx;
  color: #333333;
  margin-left: 20rpx;
}

.menu-right {
  display: flex;
  align-items: center;
  
  .badge {
    font-size: 24rpx;
    color: #ffffff;
    background-color: #f56c6c;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    margin-right: 10rpx;
  }
  
  .balance {
    font-size: 28rpx;
    color: #f56c6c;
    margin-right: 10rpx;
  }
}
</style>